import RestarigoPage from '../../../src/pages/RestarigoPage.vue';
import { describe, it, expect, jest, beforeEach } from '@jest/globals';
import { createRouter, createWebHistory } from 'vue-router';
import { mount, shallowMount } from '@vue/test-utils';
import {
  Quasar,
  QLayout,
  QPageContainer,
  QPage,
  QBtn,
  QStepper,
  QStep,
  QIcon,
  QInput,
} from 'quasar';
import flushPromises from 'flush-promises';
import routes from '../../../src/router/routes';
import { createPinia, defineStore } from 'pinia';
//import flushPromises from 'flush-promises';

jest.mock('src/boot/apollo', () => ({}));

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

const pinia = createPinia();

describe('RestarigoPage', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = mount(
      {
        components: {
          RestarigoPage,
          QLayout,
          QPageContainer,
          QPage,
        },
        template: `
      <q-layout>
          <q-page-container>
            <q-page>
              <RestarigoPage />
            </q-page>
          </q-page-container>
        </q-layout>
    `,
      },
      {
        global: {
          plugins: [Quasar, router, pinia],
          // Здесь не нужно регистрировать компоненты Quasar, если они уже включены через плагин Quasar
        },
      },
    );
  });

  it('checks presence of introductory paragraphs', async () => {
    expect(wrapper.html()).toContain(
      'Вы зашли на страницу восстановления доступа.',
    );
    expect(wrapper.html()).toContain(
      'Для продолжения процедуры Вам необходимо идентифицировать свою учетную запись по E-mail, указанным при регистрации.',
    );
  });
  it('checks presence of the send button with icon "send"', async () => {
    // Поиск всех q-btn компонентов
    const qButtons = wrapper.findAllComponents({ name: 'q-btn' });
    const sendButtonExists = qButtons.some((qButtonWrapper) => {
      // Пытаемся найти q-icon с нужным name prop внутри каждого q-btn
      const icon = qButtonWrapper.findComponent({
        name: 'q-icon',
        props: { name: 'send' },
      });
      return icon.exists(); // Проверяем, существует ли иконка с props name="send"
    });

    expect(sendButtonExists).toBe(true);
  });

  it('Step 2: Confirmation code elements', async () => {
    console.log(wrapper.html());
    expect(wrapper.html()).toContain('Код подтверждения');

    expect(wrapper.html()).toContain('q-stepper__step');
  });

  it('Step 3: New password elements', async () => {
    wrapper.vm.step = 3;
    await wrapper.vm.$nextTick();
    expect(wrapper.html()).toContain('Новый пароль');

    expect(wrapper.find('.new-password-input').exists()).toBeTruthy();

    expect(wrapper.find('input[ref="password1"]').exists()).toBe(true);
    expect(wrapper.find('input[ref="password2"]').exists()).toBe(true);
  });

  it('Step 4: Completion elements', async () => {
    // Предполагаем, что step контролируется через data компонента.
    // Установим значение step, соответствующее четвёртому шагу.
    wrapper.vm.step = 4;
    await wrapper.vm.$nextTick();

    console.log(wrapper.html());

    expect(wrapper.html()).toContain('Завершение');
    expect(wrapper.html()).toContain('transition-stub');
    // Теперь проверяем наличие ожидаемого текста.
    // expect(wrapper.text()).toContain(
    //   'Новый пароль установлен, теперь Вы можете воспользоваться формой входа и продолжить использование своего аккаунта',
    // );
  });
});
